<template>
  <div class="super-flow-box">
    <super-flow
      ref="superFlow"
      :draggable="true"
      :node-list="nodeList"
      :link-list="linkList"
      :origin="origin"
      :node-menu="nodeMenuList"
      :link-menu="linkMenuList"
      :link-desc="linkDesc"
    >
      <template v-slot:node="{meta}">
        <div :class="`flow-node flow-node-${meta.prop}`" @click="show">
          <header>
            {{ meta.name }}
          </header>
          <section>
            {{ meta.desc }}
          </section>
        </div>
      </template>
    </super-flow>
  </div>
</template>

<script >
// 需要 npm install vue-super-flow --save 当前版本 => "vue-super-flow": "^1.3.8"
import SuperFlow from 'vue-super-flow'
import 'vue-super-flow/lib/index.css'

const drawerType = {
  node: 0,
  link: 1
}
export default {
  components: { SuperFlow },
  data() {
    return {
      drawerType,
      drawerConf: {
        title: '',
        visible: false,
        type: null,
        info: null,
        open: (type, info) => {
          const conf = this.drawerConf
          conf.visible = true
          conf.type = type
          conf.info = info
          if (conf.type === drawerType.node) {
            conf.title = '节点'
            if (this.$refs.nodeSetting) this.$refs.nodeSetting.resetFields()
            this.$set(this.nodeSetting, 'name', info.meta.name)
            this.$set(this.nodeSetting, 'desc', info.meta.desc)
          } else {
            conf.title = '连线'
            if (this.$refs.linkSetting) this.$refs.linkSetting.resetFields()
            this.$set(this.linkSetting, 'desc', info.meta ? info.meta.desc : '')
          }
        },
        cancel: () => {
          this.drawerConf.visible = false
          if (this.drawerConf.type === drawerType.node) {
            this.$refs.nodeSetting.clearValidate()
          } else {
            this.$refs.linkSetting.clearValidate()
          }
        }
      },
      linkSetting: {
        desc: ''
      },
      nodeSetting: {
        name: '',
        desc: ''
      },
      origin: [0, 0],
      nodeList: [],
      linkList: [],

      nodeMenuList: [
        [
          {
            label: '删除',
            disable: false,
            hidden(node) {
              return node.meta.prop === 'start'
            },
            selected(node, coordinate) {
              node.remove()
            }
          }
        ],
        [
          {
            label: '编辑',
            selected: (node, coordinate) => {
              console.log(node, coordinate)
            }
          }
        ]
      ],
      linkMenuList: [
        [
          {
            label: '删除',
            disable: false,
            selected: (link, coordinate) => {
              link.remove()
            }
          }
        ],
        [
          {
            label: '编辑',
            disable: false,
            selected: (link, coordinate) => {
              console.log(link, coordinate)
            }
          }
        ]
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    const nodeList = [
      {
        'id': '开始节点',
        'width': 100,
        'height': 80,
        'coordinate': [0, 0],
        'meta': {
          'prop': 'start',
          'name': '开始节点',
          'desc': '111'
        }
      },

      {
        'id': '条件节点1',
        'width': 100,
        'height': 80,
        'coordinate': [150, 0],
        'meta': {
          'prop': 'condition',
          'name': '条件节点1'
        }
      },
      {
        'id': '条件节点2',
        'width': 100,
        'height': 80,
        'coordinate': [150, 100],
        'meta': {
          'prop': 'condition',
          'name': '条件节点2'
        }
      },

      {
        'id': '抄送节点1',
        'width': 100,
        'height': 80,
        'coordinate': [300, 0],
        'meta': {
          'prop': 'ccc',
          'name': '抄送节点1'
        }
      },
      {
        'id': '结束节点',
        'width': 100,
        'height': 80,
        'coordinate': [450, 0],
        'meta': {
          'prop': 'end',
          'name': '结束节点'
        }
      }

    ]
    const linkList = [
      {
        'id': 'linkcs9ZhumWeTHrtUy8',
        'startId': '开始节点',
        'endId': '条件节点1',
        'startAt': [100, 40],
        'endAt': [0, 40],
        'meta': null
      },
      {
        'id': 'linknL75dQV0AWZA85sq',
        'startId': '开始节点',
        'endId': '条件节点2',
        'startAt': [100, 40],
        'endAt': [0, 40],
        'meta': null
      },
      {
        'id': 'linkA0ZZxRlDI9AOonuq',
        'startId': '条件节点2',
        'endId': '抄送节点1',
        'startAt': [160, 40],
        'endAt': [0, 40],
        'meta': null
      },
      {
        'id': 'linkhCKTpRAf89gcujGS',
        'startId': '条件节点1',
        'endId': '抄送节点1',
        'startAt': [160, 40],
        'endAt': [0, 40],
        'meta': null
      },
      {
        'id': 'link2o7VZ7DRaSFKtB0g',
        'startId': '抄送节点1',
        'endId': '结束节点',
        'startAt': [160, 40],
        'endAt': [0, 25],
        'meta': null
      }

    ]
    setTimeout(() => {
      this.nodeList = nodeList
      this.linkList = linkList
    }, 100)
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    linkDesc(link) {
      return link.meta ? link.meta.desc : ''
    },
    show() {}
  }
}
</script>

<style lang="scss" scoped>
    @import './index.scss';
</style>
